<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>软著包机合同订单管理系统</title>
	</head>
	<link rel="stylesheet" href="css/common.css" />
	<style>
		/*input[type=password]:hover{
			border-color:#47abff;
		}
		input[type=text]:hover{
			border-color:#47abff;
		}
		input[type=text],input[type=password] {
  			width: 110px;
  			font-family: "微软雅黑";
  			height: 42px;
  			border: 1px solid #bfc2c8;
 			outline: none;
  			padding-left: 10px;
  			border-radius: 1px;
  			background:white;
			}
		
		input[type=checkbox]{
			position:relative;
			top:3px;
			background:white;
			border:1px solid #bfc2c8;
			}*/
			input[type=checkbox]{
			position:relative;
			top:3px;
			background:white;
			border:1px solid #bfc2c8;
			border-radius:2px; 
			}
			.inven_title{
				width:100%;
				text-align:center;
				margin : 0 auto;
				font-size:34px;
				color:#1a96d4;
				font-weight:normal;
				margin-top:140px;
				
			}
			.box{
				position:absolute;
				top:45%;
				left:52%;
			}
			.box p{
				width:200px;
				height:30px;
				line-height:30px;
				margin-top:12px;
				
			}
			
			.forgetPass{
				float:right;
				color: #47abff;
			}
			 .remPass{
				 color: #47abff;
			 }
			 .box p:nth-of-type(3),.box p:nth-of-type(4){
			 	width:210px;
			 }
			 
			footer{
				width:100%;
			 	height:100%;
			 	margin:0 auto;
			 	position: fixed;
			 	top:85%;
			 	color:#fff;
			 	
			}
			 footer .copyright{
			 	font-size:1.58vh;
			 	text-align:center;
			 
			 }
			 .bg{
			 width:100vw;
			 height:100vh;
			 background: url('img/conOrder_login.jpg') center center no-repeat;
			 background-size:cover;
			 }
			.contentBox{
				position:relative;
				left:37.2vw;
				top:26.1vh;
				width:24.6vw;
				
			}
			.contentBox p{
				width:100%;
				margin-bottom:2.9vh;
				
				
			}
			.boxTitle{
				width:100%;
				text-align:center;
				font-size:3.03vh;
				color:#000;
				font-weight:bold;
				padding-bottom:2.7vh;
			}
			input,.remPassword,.forPassword{
				font-size:1.84vh;
			}
			.contentBox p:nth-of-type(2),.contentBox p:nth-of-type(3){
				height:6.33vh;
				line-height:100%;
			}
			input[type=text],input[type=password]{
				width:85%;
				height:6.33vh;
				text-align:left;
				padding-left:3.68vw;
				border: 1px solid #bfc2c8;
				border-radius: 1px;
  				background:white;
  				outline: none;
			}
			.contentBox p:nth-of-type(2) .bgicon,.contentBox p:nth-of-type(3) .bgicon{
				
				position:relative;
				top:4.69vh;
				color:#999;
				left:1.04vw;
			}
				button{
				width:100%;
				border: none;
				height:6.06vh;
				background: #15a0fd;
				cursor: pointer;
				font-size: 2.9vh;
				color: white;
				font-family: "微软雅黑";
				outline: none;
			}
			input[type=text]:focus,input[type=password]:focus{
				border:1px solid #15a0fd;
			}
			.iconfont{
				 font-size:3.03vh;
			}
			.contentBox p:nth-of-type(4){
				clear:both;
				height:6.33vh;
				margin-bottom:0;
				line-height:6.33vh;
				
			}
			.contentBox p:nth-of-type(1){
				margin-bottom:0;
			}
			input[type=checkbox]:checked {
				width: 18px;
				height: 18px;
				background: url('img/frame/checked_blue.jpg') no-repeat;
				background-size: cover;
				outline: none;
				cursor: pointer;
				border:none;
			}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
	<script type="text/javascript" src="js/resourceList.js" ></script>
	<script type="text/javascript" src="layer-v2.4/layer/layer.js" ></script>
	<script type="text/javascript">
	
	</script>	
	<body class="bg">
		<div class="contentBox">
			<p class="boxTitle">虚拟航空公司合同订单管理系统</p>
			<p><i class="bgicon iconfont">&#xe603;</i><input class="userName user" type="text" placeholder="请输入用户名"/></p>
			<p><i class="bgicon iconfont">&#xe78d;</i><input class="passWord pw" type="password" placeholder="请输入密码"/></p>
			<p><input class="checkPass remenber" type="checkbox"/> <span class="remPass remPassword">记住密码</span><span class="forgetPass forPassword">忘记密码? </span></p>
			<p><button class="submit login">登录</button></p>
		</div>
		<footer>
				<p class="copyright">版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 天津伊翔运达网络科技有限公司&nbsp;&nbsp;&nbsp; 2017</p>
		</footer>
	<!-- 
	 	<h1 class="inven_title">包机库存管理系统</h1>
		<div class="box">
				<p><input class="userName user" type="text" placeholder="请输入用户名"/></p>
				<p><input class="passWord pw" type="password" placeholder="请输入密码"/></p>
				<p><input class="checkPass remenber" type="checkbox"/> <span class="remPass remPassword">记住密码</span><span class="forgetPass forPassword">忘记密码? </span></p>
				<p><button class="submit login">登录</button></p>
		</div>
		
			<footer>
				<p class="copyright">版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 天津伊翔运达网络科技有限公司&nbsp;&nbsp;&nbsp; 2017</p>
			</footer>	  -->
	
	</body>
	
	<script>
	$(".userName").focus(function(){
		$(this).prev().css("color","#15a0fd");
	}).blur(function(){
		$(this).prev().css("color","#999999");
	});
	$(".passWord").focus(function(){
		$(this).prev().css("color","#15a0fd");
	}).blur(function(){
		$(this).prev().css("color","#999999");
	});
	var url = document.location.href.toString();
	var u = url.split("=");
	 
			if(getCookie('username')){
			 	$(".user").val(getCookie('username'))
			 	$(".remenber").prop("checked",true)	
			}
			if(getCookie('password')){
				$(".pw").val(getCookie('password'))
			}
			
			
			//________________________________________________________鼠标离开判断用户名
			$(".user").blur(function(){
				if($(".user").val()==""){							
					layer.msg("用户名不能为空！",{icon:2,time:2000})
					return false;
				}
				if($(".user").val()==getCookie('username')){
					$(".pw").val(getCookie('password'))					
				}else{
					$(".pw").val("")
				}
			})			
	
	
	//________________________________________________________点击文字选中复选框
		$(".remPassword").click(function(){
			if(!$(".remenber").is(':checked')){
				$(".remenber").prop("checked",true)			
			}else{
				$(".remenber").prop("checked",false)
			}			
		})
	//________________________________________________________点击登录
		$(".login").click(function(){
			login()			
		})
		document.onkeydown = function(ev){
			ev = ev||event
			if(ev.keyCode=="13"){
				login()
			}
		}
		function login(){
				
				var loginMess = {};
				var user = $('.user').val();
				var pw = $('.pw').val();
				
				if($(".user").val()==""){
					layer.msg("用户名不能为空！",{icon:2,time:2000})
					return false;
				}
				if($(".pw").val()==""){
					layer.msg("密码不能为空！",{icon:2,time:2000});
					return false;
				}else{
					if($(".remenber").is(':checked')){
						setCookie('username',user,12);
						setCookie('password',pw,12)
					}else{
						//removeCookie('username');
						removeCookie('password');
					}
					loginMess = {
							"loginname":user,
							"password":pw
						}
					$.ajax({
						type:"post",
						url:"api/login?temp="+Math.random(),
						contentType:'application/json;charset=utf-8',
						async:false,
						data:JSON.stringify(loginMess),
						success:function(data){
							data = JSON.parse(data);							
							if(data.status=="1001"){
								window.location = "index?to="+u[1];
							}else{							
								layer.msg("请输入正确的用户名和密码！",{icon:2,time:2000})
								return false;
							}
															
						}			
					});	
				}
			}
		
//________________________________________________________________________________________忘记密码
   		$(".forPassword").click(function(){
   			layer.msg("请联系管理员重置密码！",{icon:5,time:2000})
   		})
			 
			 
			 
			 
			//设置cookie 
			function setCookie(key,value,t){
				var oDate=new Date();
				oDate.setDate(oDate.getDate()+t);
				document.cookie=key+"="+encodeURI(value)+";expires="+oDate.toGMTString();
			}
			//移除cookie
			function removeCookie(key){
				setCookie(key,"",-10);
			}
			//获取cookie
			function getCookie(key){
				var arr=document.cookie.split("; ");
				for(var i=0;i<arr.length;i++){
					var newArr=arr[i].split("=");
					if(newArr[0]==key){
						return decodeURI(newArr[1]);
					}					
				};
				return false;
			}
	</script>
</html>
